
<template>
<div class="pad">
	<el-page-header @back="goBack" :content="articleList[0].enterpriseName">
	</el-page-header>


<!--	<div class="head-search m-t-b">
				<div class="s-left">
     	  	 	<el-input
       	  			 style="width: 280px; margin-right: 15px"
          			placeholder="输入文章标题搜索"
      	 	  		 v-model="searchText"
        	 		 @keypress.native.enter="handleSearch"
     		   		  @input="clearSearch"
    	    			/>
       		 <el-button type="primary" @click="handleSearch" :loading="articleLoading">
     			     <i class="el-icon-search"></i>
         		 搜索
      			  </el-button>
     			 </div>
      			<el-button type="primary" @click="goAddArticle">
        		<i class="el-icon-plus"></i>
       			 添加文章
       			 </el-button>
</div> -->



		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/' }">{{articleList[0].enterpriseName}}</el-breadcrumb-item>
			<el-breadcrumb-item>文章列表</el-breadcrumb-item>
		</el-breadcrumb>

		<div class="firm_card">
			<el-card class="elcard" v-for="(item, id) in articleList" :key="id">
				<div @click.stop="lookArticle(item.knowledgeId)">
					<img :src="item.knowledgePic" alt="" width="276" height="185" />
				</div>
				<div id="card_icon">
					<div>
						<el-tooltip class="item" effect="dark" content="修改文章" placement="bottom">
							<el-button
								class="iii el-icon-edit"
								@click="editArticle(item)"></el-button>
						</el-tooltip>

						<el-tooltip class="item" effect="dark" content="设为广告" placement="bottom">
							<el-button class="iii el-icon-s-promotion" @click="setToAd(item)" ></el-button>
						</el-tooltip>
						<el-tooltip v-if="item.isSlideshow !== 1 && item.knowledgeStatus == 1 && item.knowledgeLife != 0"
							class="item" effect="dark" content="设为轮播" placement="bottom">
							<el-button class="iii el-icon-camera-solid isShow1" @click="showChange(item, $event)" ></el-button>
						</el-tooltip>
						<el-tooltip v-if=" item.isSlideshow == 1 && item.knowledgeStatus == 1 && item.knowledgeLife != 0"
							class="item" effect="dark" content="禁用轮播" placement="bottom"
						>
							<el-button class="iii el-icon-camera-solid isShow2" @click="showChange(item, $event)" ></el-button>
						</el-tooltip>
						<el-tooltip v-if="item.isSlideshow !== 1 && item.knowledgeLife == 0"
							class="item" effect="dark" content="无法操作" placement="bottom" >
							<el-button disabled class="iii el-icon-camera-solid isShow3" ></el-button>
						</el-tooltip>

						<el-tooltip v-if="item.knowledgeLife == 1"
							class="item" effect="dark" content="禁用" placement="bottom" >
							<el-button class="iii el-icon-switch-button shutdown" @click="handleChange(item, $event)"></el-button>
						</el-tooltip>
						<el-tooltip v-if="item.knowledgeLife !== 1" class="item" effect="dark" content="启用 " placement="bottom">
							<el-button
								class="iii el-icon-switch-button shutdown2"
								@click="handleChange(item, $event)"
							></el-button>
						</el-tooltip>
						<el-tooltip
							class="item"
							effect="dark"
							content="修改浏览/收藏量"
							placement="bottom"
						>
							<el-button
								class="iii el-icon-s-management"
								@click="editCollectNum(item)"
							></el-button>
						</el-tooltip>

						<el-popover v-if="item.knowledgeStatus == 0"
							class="" placement="bottom" width="240" trigger="click">
							<div>
								<el-button type="primary" @click="checkAuthorityStatus(item, 1, 1)">通过审核</el-button>
								<el-button type="danger" @click="checkAuthorityStatus(item, 2, 0)">驳回审核</el-button>
							</div>
							<el-button id="check1" class="el-icon-s-check" slot="reference" ></el-button>
						</el-popover>

						<el-popover v-if="item.knowledgeStatus == 1"
							class="" placement="bottom" width="110" trigger="click" >
							<div>
								<el-button type="danger" @click="checkAuthorityStatus(item, 3, 0)" >管理员禁用</el-button>
							</div>

							<el-button id="check2" class="el-icon-s-check" slot="reference"></el-button>
						</el-popover>
					</div>
				</div>

				<div class="card_text">
					<p class="el_name">{{ item.knowledgeName }}</p>
					<p class="el_like">
						<i class="el-icon-view"></i>{{ item.totalBrowNum }}
						<i class="el-icon-star-off"></i>{{ item.totalCollectNum }}
					</p>
					<p class="el_time">创建时间：{{ item.createDate }}</p>
				<!-- <p class="el_id">用户编号：{{ item.id }}</p> -->
				</div>

				<span class="el_status1" v-if="item.knowledgeStatus == 0">待审核</span>
				<span class="el_status2" v-else-if="item.knowledgeStatus == 1"
					>审核通过</span
				>
				<span class="el_status3" v-else-if="item.knowledgeStatus == 2"
					>审核失败</span
				>
				<span class="el_status4" v-else-if="item.knowledgeStatus == 3"
					>管理员禁用</span
				>
			</el-card>
		</div>

		<!-- 修改浏览、收藏量 -->
		<el-dialog title="修改浏览、收藏量" :visible.sync="editNum">
			<div>
				<el-form :model="collectData" label-width="80px">
					<el-form-item label="浏览量：">
						<el-input
							v-model.number="collectData.browNum"
							placeholder="请输入整数"
							clearable
						>
						</el-input>
					</el-form-item>
					<el-form-item label="收藏量：">
						<el-input
							v-model.number="collectData.collectNum"
							placeholder="请输入整数"
						></el-input>
					</el-form-item>

					<el-form-item style="text-align: right">
						<el-button @click="editNum = false">取 消</el-button>
						<el-button type="primary" @click="isShowEdit">确 定</el-button>
					</el-form-item>
				</el-form>
			</div>
		</el-dialog>

		<!-- 设为广告 -->
		<el-dialog title="设置广告" :visible.sync="isShowAdSetting">
			<el-form label-position="top" :model="ad">
				<el-form-item label="广告类型">
					<el-radio-group v-model="adType">
						<el-radio v-for="(item, i) in adTypes" :key="i" :label="i + 1">
							{{ item }}
						</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="广告标题">
					<!-- <el-input v-model="ad.title" /> -->
					<el-select v-model="ad.title">
						<el-option
							v-for="item in advertisingList"
							:key="item.knowledgeName"
							:label="item.knowledgeName"
							:value="item.knowledgeName"
						>
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="广告图片">
					<el-upload
						class="avatar-uploader"
						action="https://jsonplaceholder.typicode.com/posts/"
						:show-file-list="true"
						:http-request="uploadAdImg"
					>
						<img
							v-if="ad.advertisementPic"
							:src="ad.advertisementPic"
							class="avatar"
						/>
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="isShowAdSetting = false">取 消</el-button>
				<el-button type="primary" @click="fetchAddAd" :loading="isAdding"
					>确 定</el-button
				>
			</div>
		</el-dialog>

		<el-pagination
			class="flex m-t-b"
			:page-size="pageSize"
			background
			layout="prev, pager, next"
			@current-change="handlePagi"
			:total="articleTotal"
		>
		</el-pagination>
	</div>
</template>


<script>
import { formatDate } from "../util";
import {
	getKnowledgeList,
	changeShowStatus,
	changeAuthorityStatus,
	createAd,
	getAdTitle,
	collectNum,
	changeHandleslideshow
} from "../api/version2";

export default {
	name: "ArticleList",
	data() {
		return {
			isUse: false,
			knowledgeId: "",
			editNum: false,
			collectData: {
				collectNum: "",
				browNum: ""
			},
			searchText: "",
			articleList: [],
			articleLoading: false,
			articleTotal: 0,
			pageSize: 10,
			enterpriseId: null,
			roleTitle: "",

			isShowAdSetting: false,
			isAdding: false,
			ad: {
				knowledgeId: "",
				advertisementPic: "",
				title: ""
			},
			advertisingList: [],
			adType: 1,
			adTypes: ["首页弹窗广告"]
		};
	},
	methods: {
		goBack() {
			history.back();
		},

		// 设为轮播
		showChange(data, e) {
			// alert(123)
			// if(data.knowledgeStatus != 1 && roleTitle != '超级管理员'){

			console.log(data);
			// console.log(e);
			// 改变状态
			this.$confirm(
				`${data.isSlideshow !== 1 ? "启用" : "禁用"}轮播图后, ${
					e ? "该文章可在客户端展示" : "该文章不在客户端展示"
				}`,
				"提示",
				{
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				}
			)
				.then(r => {
					// if (this.roleTitle == "超级管理员") {
					//   this.fetchSetStatus2(data.knowledgeId, e ? 1 : 3, 0);
					// } else {
					this.fetchShowStatus1(
						data.knowledgeId,
						data.isSlideshow != 1 ? 1 : 0,
						0
					);
					// }
				})
				.catch(err => {
					data.enable = !e;
				});

			// }else{
			//   this.$message.warning("你没权限");
			// }
		},
		// 改变轮播图状态
		fetchShowStatus1(knowledgeId, isSlideshow) {
			// 设置显示状态
			changeHandleslideshow({
				knowledgeId: knowledgeId,
				// knowledgeType: type,
				isSlideshow: isSlideshow
			})
				.then(res => {
					// console.log(res);
					this.$message.success("操作成功");
					this.fetchKnowledgeList(1);
				})
				.catch(e => {});
		},

		// -----------------------------------------------

		handlePagi(page) {
			// 分页
			this.fetchKnowledgeList(page);
		},
		handleChange(data, e) {
			// alert(123)
			// if(data.knowledgeStatus != 1 && roleTitle != '超级管理员'){

			console.log(data);
			console.log(e);
			// 改变状态
			this.$confirm(
				`${data.knowledgeLife != 1 ? "启用" : "禁用"}该视频后, ${
					e ? "该视频可在客户端正常展示" : "该视频不在客户端展示"
				}`,
				"提示",
				{
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				}
			)
				.then(r => {
					// if (this.roleTitle == "超级管理员") {
					//   this.fetchSetStatus2(data.knowledgeId, e ? 1 : 3, 0);
					// } else {
					this.fetchSetStatus1(
						data.knowledgeId,
						data.knowledgeLife != 1 ? 1 : 0,
						0
					);
					// }
				})
				.catch(err => {
					data.enable = !e;
				});

			// }else{
			//   this.$message.warning("你没权限");
			// }
		},
		setToFirstShow(row) {
			// 设置为在公司信息中置顶显示
			console.log(row);
		},
		fetchSetStatus1(knowledgeId, Life) {
			// 设置显示状态
			changeShowStatus({
				knowledgeId: knowledgeId,
				// knowledgeType: type,
				knowledgeLife: Life
			})
				.then(res => {
					// console.log(res);
					this.$message.success("操作成功");
					this.fetchKnowledgeList(1);
				})
				.catch(e => {});
		},
		fetchSetStatus2(knowledgeId, type, life) {
			// 设置审核状态
			changeAuthorityStatus({
				knowledgeId: knowledgeId,
				knowledgeStatus: type,
				knowledgeLife: life
			})
				.then(res => {
					console.log(res);
					this.$message.success("操作成功");
					this.fetchKnowledgeList(1);
				})
				.catch(e => {});
		},
		delArticle(article) {
			// 删除文章
			this.$confirm(`确定删除该文章吗?`, "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning"
			})
				.then(r => {
					console.log(article);
				})
				.catch(err => {});
		},
		checkAuthorityStatus(data, type, life) {
			// if (!this.$checkAuth("isUserStatus")) {
			if (this.$checkAuth("isUserStatus")) {
				return this.$message.error("暂无对应操作权限!");
			}
			// 改变审核状态
			this.$confirm(
				`确定${type == 1 ? "通过" : "驳回"}该视频的发布申请吗?`,
				"提示",
				{
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				}
			)
				.then(r => {
					this.fetchSetStatus2(data.knowledgeId, type, life);
				})
				.catch(err => {});
		},
		clearSearch() {
			// 清除搜索
			if (!this.searchText.trim()) {
				this.fetchKnowledgeList(1);
			}
		},
		changeStatus(row) {
			// 改变状态
			console.log(row);
		},
		goAddArticle() {
			// 添加文章
			this.$router.push("/operation/add?type=1");
			// this.$router.push('/operation/add');
		},
		lookArticle(id) {
			// 查看文章详情
			this.$router.push(`/operation/article/detail/${id}`);
		},

		editArticle(article) {
			// console.log(article);
			// 修改文章
			this.$router.push("/operation/add/?id=" + article.knowledgeId);
		},
		handleSearch() {
			// 搜索事件
			if (this.articleLoading) return;
			if (!this.searchText.trim()) {
				return this.$message.error("搜索内容不能为空");
			}
			this.fetchKnowledgeList(1);
		},

		fetchKnowledgeList(index) {
			// 查询知识列表
			this.articleLoading = true;
			getKnowledgeList({
				index,
				count: this.pageSize,
				queryParam: {
					knowledgeType: 0,
					enterpriseId: this.enterpriseId,
					knowledgeName: this.searchText || null
				}
			})
				.then(res => {
					console.log(res);
					this.articleLoading = false;
					let list = res.data.data.list || [];
					list.forEach(item => {
						// item.createDate = formatDate(item.createDate, "ZH");
						item.createDate = formatDate(item.createDate,"zh:");
						item.id = item.knowledgeId.slice(5);
            item.enable = Boolean(item.knowledgeLife);
						item.totalBrowNum = Number(item.browse + item.fakeBrowseNumber);
            // console.log('========='+item.browse)
						item.totalCollectNum = Number(
							item.collection + item.fakeCollectionNumber
						);
						// this.enterpriseName = list.enterpriseName;
					});

					this.articleList = list;
					this.articleTotal = res.data.data.totalRecord;
				})
				.catch(e => {
					this.articleLoading = false;
				});
		},

		// 设为广告
		setToAd(row) {
			// console.log(row);
			this.isShowAdSetting = true;
			this.ad.knowledgeId = row.knowledgeId;
			getAdTitle({
				knowledgeId: row.knowledgeId
			}).then(res => {
				// console.log(res);
				this.advertisingList = res.data.data || [];
			});
		},

		// <<<<<<< HEAD
		// 修改浏览、收藏量
		editCollectNum(row) {
			console.log(row);
			this.editNum = true;
			this.knowledgeId = row.knowledgeId;
			this.collectData.collectNum = row.fakeCollectionNumber;
			this.collectData.browNum = row.fakeBrowseNumber;
		},

		isShowEdit() {
			let collNum = Number(this.collectData.collectNum);
			let browNum = Number(this.collectData.browNum);
			if (collNum == null && browNum == null) {
				this.$message.error("您还没有输入!请输入！");
			} else {
				collectNum({
					knowledgeId: this.knowledgeId,
					fakeBrowseNumber: browNum,
					fakeCollectionNumber: collNum
				}).then(res => {
					this.$message.success("修改成功");
					this.fetchKnowledgeList(1);
					this.editNum = false;
					this.collectData.browNum = "";
					this.collectData.collectNum = "";
				});
			}
		},

		// 设为广告
		// =======
		// >>>>>>> a90df92bd4aa37f15a053df35a89cc391b64b5a1
		fetchAddAd() {
			this.isAdding = true;
			createAd(this.ad).then(res => {
				// console.log(res);
				this.isAdding = false;
				this.isShowAdSetting = false;
				this.$message.success("操作成功");
			});
		},
		uploadAdImg({ file }) {
			// 上传广告图片
			const that = this;
			fileToBase64(file, str => {
				uploadImage(str)
					.then(res => {
						let path = res.data.data.path;
						path = path.replace("http:", "https:");
						that.ad.advertisementPic = path;
					})
					.catch(e => {});
			});
		}
	},

	created() {
		let roleTitle = sessionStorage.getItem("roleTitle") || "";
		this.roleTitle = roleTitle;
		// this.enterpriseId = this.$route.params.enterpriseId;
		let enterpriseId = sessionStorage.getItem("enterpriseId");
		// this.enterpriseName = sessionStorage.getItem("enterpriseName");
		if (roleTitle == "公司") {
			this.enterpriseId = enterpriseId;
			// this.enterpriseName = this.enterpriseName;
		}
		this.fetchKnowledgeList(1);
	}
};
</script>
<style lang="scss">
.head-search {
	display: flex;
	justify-content: space-between;
}

.firm_card {
	// display: flex;
	display: inline-block;
	// position: relative;

	.elcard {
		// flex: 1;
		display: inline-block;
		margin-left: 27px;
		width: 276px;
		height: 351px;
		position: relative;
		border-radius: 10px;

		.card_text{
			padding: 18px 20px 20px 20px;

			.el_name {
				display: inline-block;
				white-space: nowrap;
				width: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.el_like{
				margin-top: 17px;

				i:nth-of-type(2){
					margin-left: 11px;
				}
			}
			.el_time{
				margin-top: 28px;
			}
		}

		.el-card__body {
			padding: 0 !important;
		}

		#card_icon {
			// display: inline-block;
			display: none;
			position: absolute;
			top: 152px;
			right: 1px;
			text-align: center;
			margin-left: 3px;

			.isShow1 {
				color: #4ac493;
			}
			.isShow2 {
				color: #ff0015;
			}
			.isShow3 {
				color: gray;
			}

			.shutdown {
				color: #4ac493;
			}
			.shutdown2 {
				color: #ff0015;
			}

			#check1 {
				border: none;
				padding: 0;
				margin: 0;
				color: #ffbc6d;
				width: 33px;
				height: 33px;
				font-size: 24px;
				line-height: 14px;
				background: rgb(0, 0, 0);
				opacity: 0.7;
				text-align: center;
				border: none;
				border-radius: 0;

				position: absolute;
				top: -11px;
				left: -157px;
			}
			#check2 {
				color: rgb(98, 200, 149);
				border: none;
				padding: 0;
				margin: 0;
				width: 33px;
				height: 33px;
				font-size: 24px;
				line-height: 14px;
				background: rgb(0, 0, 0);
				opacity: 0.7;
				text-align: center;
				border: none;
				border-radius: 0;

				position: absolute;
				top: -11px;
				left: -190px;
			}
			#check1:hover {
				opacity: 0.8;
				background: #344126;
			}
			#check2:hover {
				opacity: 0.8;
				background: #344126;
			}

			.iii {
				width: 33px;
				height: 33px;
				font-size: 24px;
				line-height: 14px;
				// color: rgb(255, 255, 255);
				// display: none;
				padding: 0;
				background: rgb(0, 0, 0);
				opacity: 0.7;
				// position: absolute;
				text-align: center;
				border: none;
				border-radius: 0;
				margin: 0;
			}
			.iii:hover {
				background: #344126;
				opacity: 0.8;
			}
		}


		.el_status1 {
			width: 80px;
			height: 32px;
			line-height: 32px;
			text-align: center;
			font-size: 16px;
			border-radius: 15px;
			background: #ffbc6d;
			color: white;
		}
		.el_status2 {
			width: 80px;
			height: 32px;
			line-height: 32px;
			text-align: center;
			font-size: 16px;
			border-radius: 15px;
			background: #4ac493;
			color: white;
		}
		.el_status3 {
			width: 80px;
			height: 32px;
			line-height: 32px;
			text-align: center;
			font-size: 16px;
			border-radius: 15px;
			color: white;
			background: #e86e72;
		}
		.el_status4 {
			width: 80px;
			height: 32px;
			line-height: 32px;
			text-align: center;
			font-size: 16px;
			border-radius:325px;
			color: white;
			background: #b2b2b9;
		}
		span {
			position: absolute;
			// z-index: 999;
			right: 8px;
			top: 11px;
			opacity: .8;
		}
	}
	.elcard:hover {
		#card_icon {
			display: block;
			// background: #222222;
			// opacity: 0.6;

			i {
				display: inline-block;
			}
			.iii {
				display: inline-block;
			}
		}
	}
}

.el-breadcrumb{
	line-height: 20px;
	font-size: 15px;
	margin-top: 42px;
	margin-bottom: 24px;
}
.el-card__body{
  padding: 0 !important;
}
</style>
